<template>
  <span :style="styles" class="ico"
    ><a-icon type="caret-right" class="act" :style="{ color: color }"
  /></span>
</template>

<script>
export default {
  name: "Ico",
  props: {
    color: {
      type: String,
      default: "#fff",
    },
    background: {
      type: String,
      default: `rgba(0, 0, 0, 0.3)`,
    },
    styles: {
      type: Object,
      default: () => ({
        width: "2.4rem",
        height: "2.4rem",
        paddingLeft: "0.3rem",
        paddingTop: "0.2rem",
        background: `rgba(0, 0, 0, 0.3)`,
        top: '1.2rem',
        left: '1.2rem'    
      }),
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.ico {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  text-align: center;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  .act {
    font-size: 1.7rem;
  }
}
</style>